<template>
    <div class="admin_user_edit">
        <div class="box" :class="'box-'+theme">
            <div class="box-header with-border">
                <h3 class="box-title">{{$t('Quickly fill in')}}</h3>
            </div>
            <div class="box-body">
                <edit :options="options">
                    <template slot="content" slot-scope="props">
                        <div class="move-items col-lg-4 col-md-6 col-sm-12 col-xs-12">
                            <edit-item key-name="name" :options="{name: props.transField('Name'), required: true,disabled:true}"  :datas="props">
                            </edit-item>
                            <edit-item key-name="key" :options="{name: props.transField('Key name'), required: true,disabled:true}"  :datas="props">
                            </edit-item>
                            <edit-item key-name="type" :options='{"name": props.transField("Type"), "required": false,"type":"select"}' :datas="props">
                                <template slot="input-item">
                                    <div class="edit-item-content">
                                        <select2 v-model="props.data.row['type']"
                                                 :disabled="'disabled'"
                                                 :default-options="props.maps['type']"
                                                 :placeholder="false"
                                                 :is-ajax="false" >
                                        </select2>
                                    </div>
                                </template>
                            </edit-item>
                            <edit-item key-name="itype" :options='{"name": props.transField("Input box type"), "required": false,"type":"select"}' :datas="props">
                                <template slot="input-item">
                                    <div class="edit-item-content">
                                        <select2 v-model="props.data.row['itype']"
                                                 :disabled="'disabled'"
                                                 :default-options="props.maps['itype']"
                                                 :placeholder="false"
                                                 :is-ajax="false" >
                                        </select2>
                                    </div>
                                </template>
                            </edit-item>
                            <edit-item key-name="description" :options="{name: props.transField('Describe'), required: false,type:'textarea'}"  :datas="props">
                            </edit-item>
                        </div>
                        <div class="move-items col-lg-8 col-md-12 col-sm-12 col-xs-12">
                            <edit-item key-name="options" :options="{name: props.transField('Component properties'), required: false,type:'textarea'}"  :datas="props">
                                <template slot="input-item">
                                    <json-edit
                                        v-model="props.data.row['options']"
                                        :disabled="!props.url"
                                        :placeholder="'请输入组件属性'">
                                    </json-edit>
                                </template>
                            </edit-item>
                            <edit-item key-name="value" :options="{name: props.transField('Value'), required: false}"  :datas="props">
                                <template slot="input-item">
                                    <input
                                        v-if="props.data.row['itype']==1"
                                        type="text"
                                        v-model="props.data.row['value']"
                                        class="form-control"
                                        v-bind="props.data.row['options']||{}"
                                        :disabled="!props.url"
                                        :placeholder="$t('Please enter')" />
                                    <textarea
                                        v-else-if="props.data.row['itype']==2"
                                        v-model="props.data.row['value']"
                                        class="form-control"
                                        v-bind="props.data.row['options']||{}"
                                        rows="6"
                                        :disabled="!props.url"
                                        :placeholder="$t('Please enter')">
                                    </textarea>
                                    <div v-else-if="props.data.row['itype']==3">
                                        <editor-md
                                            v-model="props.data.row['value']"
                                            v-bind="props.data.row['options']||{}"
                                            :disabled="!props.url">
                                        </editor-md>
                                    </div>
                                    <div v-else-if="props.data.row['itype']==4">
                                        <json-edit
                                            v-model="props.data.row['value']"
                                            v-bind="props.data.row['options']||{}"
                                            :disabled="!props.url"
                                            :placeholder="$t('Please enter')">
                                        </json-edit>
                                    </div>
                                    <div class="edit-item-content" v-else-if="props.data.row['itype']==5">
                                        <el-switch v-model="props.data.row['value']"
                                                   :disabled="!props.url"
                                                   v-bind="props.data.row['options']||{}"
                                                   :active-text="$t('Open')"
                                                   :inactive-text="$t('Closed')"
                                                   :active-value="1"
                                                   :inactive-value="0">
                                        </el-switch>
                                    </div>
                                    <div class="edit-item-content" v-else-if="props.data.row['itype']==6">
                                        <el-input-number
                                            v-model="props.data.row['value']"
                                            class="w-100"
                                            size="medium"
                                            :disabled="!props.url"
                                            v-bind="props.data.row['options']||{}"
                                            :step="1">
                                        </el-input-number>
                                    </div>
                                    <div class="edit-item-content" v-else-if="props.data.row['itype']==7">
                                        <upload v-model="props.data.row['value']"
                                                v-if="props.data.row['id']"
                                                v-bind="props.data.row['options']||{}"
                                                :disabled="!props.url">
                                        </upload>
                                        <upload v-model="images"
                                                v-if="!props.data.row['id']"
                                                v-bind="props.data.row['options']||{}"
                                                :disabled="!props.url">
                                        </upload>
                                    </div>
                                    <div class="edit-item-content" v-else-if="props.data.row['itype']==8">
                                        <qiniu-upload :disabled="!props.url"
                                                      :token-url="'/open/qi-niu/token?disk=qiniu_public'"
                                                      v-model="props.data.row['value']">
                                        </qiniu-upload>
                                    </div>
                                    <div class="edit-item-content" v-else-if="props.data.row['itype']==9">
                                        <many v-model="props.data.row['value']"
                                              :new-item="{name:'',img_url:'',href:''}"
                                              :fields="carousel_images_fields"
                                              :key-value="'value'"
                                              :sort-key="'no'"
                                              :disabled="!props.url">
                                            <template slot="col" slot-scope="props1">
                                                <validation-provider :vid="props1.vid" :name="props1.fieldName" v-slot="{ errors }">
                                                    <div :class="{'has-error':(errors && errors.length>0)}">
                                                        <div v-if="props1.fieldKey=='img_url'">
                                                            <upload v-model="props1.item[props1.fieldKey]"
                                                                    :disabled="!props.url">
                                                            </upload>
                                                        </div>
                                                        <div v-else>
                                                            <input type="text" v-model="props1.item[props1.fieldKey]" :disabled="!props.url" placeholder="请输入" class="form-control input-sm"/>
                                                        </div>
                                                    </div>
                                                </validation-provider>
                                            </template>
                                        </many>
                                    </div>
                                </template>
                            </edit-item>
                        </div>
                    </template>
                </edit>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapState, mapActions, mapMutations, mapGetters} from 'vuex';
    import {ValidationProvider} from 'vee-validate';
    export default {
        components:{
            ValidationProvider,
            'edit':()=>import(/* webpackChunkName: "common_components/edit.vue" */ 'common_components/edit.vue'),
            "el-input-number": ()=>import(/* webpackChunkName: "element-ui/lib/input-number" */ 'element-ui/lib/input-number'),
            "edit-item": ()=>import(/* webpackChunkName: "common_components/editItem.vue" */ 'common_components/editItem.vue'),
            "select2":()=>import(/* webpackChunkName: "common_components/select2.vue" */ 'common_components/select2.vue'),
            "editor-md": ()=>import(/* webpackChunkName: "common_components/editorMd.vue" */ 'common_components/editorMd.vue'),
            "el-switch": ()=>import(/* webpackChunkName: "element-ui/lib/switch" */ 'element-ui/lib/switch'),
            "json-edit":()=>import(/* webpackChunkName: "common_components/jsonEdit.vue" */ 'common_components/jsonEdit.vue'),
            "upload":()=>import(/* webpackChunkName: "common_components/upload.vue" */ 'common_components/upload.vue'),
            "qiniuUpload":()=>import(/* webpackChunkName: "common_components/qiniuUpload.vue" */ 'common_components/qiniuUpload.vue'),
            "many":()=>import(/* webpackChunkName: "common_components/many.vue" */ 'common_components/many.vue'),

        },
        props: {
        },
        data(){
            return {
                options:{
                    lang_table:'configs',
                    id:'edit', //多个组件同时使用时唯一标识
                    url:'', //数据表请求数据地址
                    params:this.$router.currentRoute.query || {}
                },
                images:[],
                carousel_images_fields:{
                    img_url:'图片',
                    href:'跳转链接',
                    name:'名称',
                }
            };
        },
        computed:{
            ...mapState([
                'theme'
            ])
        }
    };
</script>
